<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园助手 - 主页</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#EC4899', // 主色调：粉色
                        secondary: '#F472B6', // 辅助色：浅粉色
                        accent: '#BE185D', // 强调色：深粉色
                        dark: '#1E293B', // 深色
                        light: '#FDF2F8'  // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-primary {
                background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
            }
            .gradient-secondary {
                background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
            }
            .gradient-blue {
                background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
        }
    </style>
    <script>
        // 页面加载时检查用户是否已登录
        console.log('homepage.html脚本开始加载');
        window.addEventListener('DOMContentLoaded', function() {
            console.log('homepage.html页面加载完成，检查登录状态');
            const token = localStorage.getItem('token');
            const username = localStorage.getItem('username');
            
            console.log('token存在?', !!token);
            console.log('username存在?', !!username);
            console.log('localStorage内容:', localStorage);
            
            // 如果未登录，重定向到登录页面
            if (!token || !username) {
                console.log('未登录，重定向到登录页面');
                window.location.href = '/login.html';
            } else {
                console.log('已登录，显示用户名:', username);
                // 显示用户名
                document.getElementById('logged-in-username').textContent = username;
                document.getElementById('welcome-username').textContent = username;
            }
        });
        
        // 退出登录功能
        function logout() {
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            window.location.href = '/login.html';
        }
    </script>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">校园助手</h1>
            </div>
            <div class="flex items-center space-x-4">
                <!-- 用户信息展示 -->
                <div class="flex items-center space-x-4">
                    <span id="logged-in-username" class="text-gray-600"></span>
                    <a href="/user-profile.html" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-user-circle"></i>
                        <span class="ml-1 hidden md:inline">个人信息</span>
                    </a>
                    <button id="logout-button" class="text-gray-500 hover:text-red-500 transition-custom" onclick="logout()">
                        <i class="fa fa-sign-out"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8 flex flex-col items-center justify-center">
        <!-- 欢迎信息 -->
        <section class="mb-12 text-center">
            <div class="inline-block p-2 px-4 rounded-full gradient-primary text-white font-medium mb-4 shadow-lg">
                <i class="fa fa-user-circle-o mr-2"></i>用户中心
            </div>
            <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-3">
                欢迎回来，<span class="text-primary">
                    <span id="welcome-username"></span>
                </span>！
            </h2>
            <p class="text-gray-600 max-w-xl mx-auto">
                请选择您想要使用的功能，我们的AI助手将为您提供优质服务
            </p>
        </section>

        <!-- 功能选项 -->
        <section class="w-full max-w-3xl grid md:grid-cols-3 gap-6">
            <!-- 天气提醒卡片 -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-scale transition-custom cursor-pointer" onclick="window.location.href='/weather.html'">
                <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 relative overflow-hidden">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <i class="fa fa-cloud text-white text-6xl animate-float"></i>
                    </div>
                    <div class="absolute bottom-4 left-4 text-white">
                        <h3 class="text-2xl font-bold">天气提醒</h3>
                        <p class="opacity-90">实时天气预报与提醒服务</p>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute top-4 right-4 text-white/30 text-4xl">
                        <i class="fa fa-sun-o animate-pulse-slow"></i>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">
                        获取最新的天气信息，设置个性化的天气提醒，让您的出行更加便捷舒适。
                    </p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="fa fa-clock-o mr-1"></i>实时更新</span>
                        <button class="text-blue-500 hover:text-blue-600 flex items-center">
                            开始使用 <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- AI答题助手卡片 -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-scale transition-custom cursor-pointer" onclick="window.location.href='/index.html'">
                <div class="h-48 gradient-secondary relative overflow-hidden">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <i class="fa fa-robot text-white text-6xl animate-float"></i>
                    </div>
                    <div class="absolute bottom-4 left-4 text-white">
                        <h3 class="text-2xl font-bold">AI答题助手</h3>
                        <p class="opacity-90">智能问答与知识服务</p>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute top-4 right-4 text-white/30 text-4xl">
                        <i class="fa fa-lightbulb-o animate-pulse-slow"></i>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">
                        借助DeepSeek强大的AI能力，为您提供精准、专业的问题解答和知识服务。
                    </p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="fa fa-microchip mr-1"></i>AI驱动</span>
                        <button class="text-pink-500 hover:text-pink-600 flex items-center">
                            开始使用 <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 地图查询卡片 -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-scale transition-custom cursor-pointer" onclick="window.location.href='/map-query.html'">
                <div class="h-48 gradient-blue relative overflow-hidden">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <i class="fa fa-map-marker text-white text-6xl animate-float"></i>
                    </div>
                    <div class="absolute bottom-4 left-4 text-white">
                        <h3 class="text-2xl font-bold">地图查询</h3>
                        <p class="opacity-90">地理位置搜索与查询</p>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute top-4 right-4 text-white/30 text-4xl">
                        <i class="fa fa-map-o animate-pulse-slow"></i>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">
                        精准定位地理位置，查询经纬度信息，支持当前位置获取和位置搜索功能。
                    </p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span><i class="fa fa-location-arrow mr-1"></i>精准定位</span>
                        <button class="text-blue-500 hover:text-blue-600 flex items-center">
                            开始使用 <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 快速操作区域 -->
        <section class="mt-12 w-full max-w-3xl">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-star text-yellow-500 mr-2"></i>快速操作
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-custom">
                    <i class="fa fa-history text-gray-500 text-xl mb-2"></i>
                    <span class="text-sm text-gray-600">历史记录</span>
                </button>
                <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-custom">
                    <i class="fa fa-cog text-gray-500 text-xl mb-2"></i>
                    <span class="text-sm text-gray-600">设置</span>
                </button>
                <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-custom">
                    <i class="fa fa-question-circle text-gray-500 text-xl mb-2"></i>
                    <span class="text-sm text-gray-600">帮助</span>
                </button>
                <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-custom">
                    <i class="fa fa-bell text-gray-500 text-xl mb-2"></i>
                    <span class="text-sm text-gray-600">通知</span>
                </button>
                <button class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow hover:shadow-md transition-custom">
                    <i class="fa fa-bookmark text-gray-500 text-xl mb-2"></i>
                    <span class="text-sm text-gray-600">收藏夹</span>
                </button>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2024 校园助手 - 版权所有</p>
        </div>
    </footer>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">处理中</h3>
            <p class="text-gray-600 text-center" id="loading-message">正在处理您的请求，请稍候...</p>
        </div>
    </div>
</body>
</html>